<template>
  <div>
    <Header></Header>
    <van-form v-if="!loginStatus">
      <!-- {{userInfo}} -->
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="danger" @click="submit">
          登录
        </van-button>
      </div>
    </van-form>

    <!-- <van-form v-else>
      
      <div class="pop-userInfo">
        <van-image
          round
          width="80px"
          height="80px"
          style="margin: 20px 100px"
          :src="userInfo.userInfo.imgUrl"
        /> 
        <p>昵称:{{ userInfo.userInfo.username }}</p>
        <p>手机号:{{ userInfo.userInfo.phone }}</p>
      </div>

      <div style="margin: 16px">
        <van-button round block type="danger" @click="loginout">
          退出登录 
        </van-button>
      </div>
    </van-form> -->
  </div>
</template>
<script>
import Header from "@/components/home/Header.vue";
import { login } from "@/api/login.js";
import { Toast } from "vant";
import { mapMutations, mapState } from "vuex";
export default {
  name: "Home",
  components: { Header },
  data() {
    return {
      username: "", //用户名
      password: "", //密码
      // userInfo: JSON.parse(localStorage.getItem("userInfo")) || null,//从本地存储获取信息
    };
  },
  created() {
    // const userInfo = localStorage.getItem("userInfo");
  },
  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
    }),
  },
  methods: {
    ...mapMutations(["login"]),

    //登录
    submit() {
      if (!this.username || !this.password) {
        Toast("请输入用户名或手机号");
        return;
      }
      let params = { username: this.username, password: this.password };
      login(params).then((res) => {
        Toast(res.msg);
        this.login(res.data);
        this.$router.push({ path: "/home" });
      });
    },
    // 退出登录
    // async loginout() {
    //   this.loginOut();
    //   window.location.href = '/'
    //   // localStorage.clear();
    //   // this.userInfo = null;
    // }
  },
};
</script>
